<template>
  <div>
    <wz-table
      :columns="wzApplicationColumn"
      :use-index="true"
      :table-data="tableData"
    >
      <template #header="{ col }">
        <div v-if="col.details">
          <el-tooltip
            class="item"
            effect="dark"
            :content="col.details"
            placement="top-start"
          >
            <span> {{ col.label }}</span>
          </el-tooltip>
        </div>
        <div v-else>
          {{ col.label }}
        </div>
      </template>
    </wz-table>
  </div>
</template>
<script>
const MATERIAL_APP_ALL = [
    {
        label: '物料编码',
        prop: 'categoryCode',
        elProps: {
            width: '140px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料名称',
        prop: 'categoryName',
        elProps: {
            width: '140px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '自定义规格',
        prop: 'dwjl',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    { label: '计量单位', prop: 'unit', elProps: {
        'show-overflow-tooltip': true
    }},
    { label: '主设备标识名称', prop: 'spuMainName', elProps: {
        'show-overflow-tooltip': true
    }},
    { label: '源头赋码标识', prop: 'ifSourceName', elProps: {
        width: '180px',
        'show-overflow-tooltip': true
    }},
    {
        label: '设计数量',
        prop: 'totalAmount',
        details: '设计清单中该物料的数量'
    },
    {
        label: '累计申领数量',
        prop: 'totalSumReceiveAmount',
        details: '该物料累计申领总数-累计撤销申领总数'
    },
    {
        label: '实际出库数量',
        prop: 'totalOsRealAmount',
        details: '该物料累计出库总数-累计已完成退库总数'
    },
    {
        label: '可领取数量',
        prop: 'totalNoReceiveAmount',
        details: '设计数量-累计申领数量'
    }
]
// 系统常量配置
import wzTable from './cTable'
export default {
    name: 'MaterialsApplication',
    components: { wzTable },
    props: {
        flag: {
            type: Number,
            default: 1
        },
        designData: {
            type: Array,
            default: () => []
        },
        outPut: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            wzApplicationColumn: [],
            tableData: []
        }
    },
    watch: {
        designData: {
            handler(newValue) {
                this.tableData = newValue
            },
            deep: true
        }
    },
    created() {
        this.wzApplicationColumn = JSON.parse(JSON.stringify(MATERIAL_APP_ALL))
    },
    methods: {}
}
</script>
<style scoped lang="scss">
.el-upload--text {
    width: 100%;
}
.btnflex {
    display: flex;
    justify-content: space-between;
}
.el-table th {
    padding: 0px 0;
    text-align: center;
    font-size: 12px;
    color: #333333;
    letter-spacing: 0;
}
.el-table td {
    padding: 0px 0;
    text-align: center;
    font-size: 2px;
    color: #333333;
    letter-spacing: 0;
}
.click-row {
    color: #53c7f8;
    cursor: pointer;
}
.materials-remark-wrapper {
    position: relative;
    border: 1px solid #ccc;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 10px;
    &-title {
        position: absolute;
        left: 50%;
        top: -13px;
        background: #fff;
        font-weight: bold;
    }
}

.mt-10 {
    margin-top: 10px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-5 {
    margin-bottom: 5px;
}
.flex-box {
    display: flex;
    width: 100%;
    align-items: center;
    height: 28px;
    position: relative;
    &-left {
        margin-right: auto;
    }
}
.pms-el-datepicker {
    margin-left: 10px;
    margin-right: 10px;
    height: 24px;
    ::v-deep .el-input__inner {
        height: 24px;
    }
    ::v-deep .el-input__icon {
        line-height: 20px;
    }
}
.position-abs {
    position: absolute;
}
.abs-right {
    right: 10px;
}
</style>
